// 负责管理所有的自定义指令
export const imagerror = {
   // 指令对象
   // 钩子函数，会在当前dom元素插入到节点之后执行
   // 初始化时执行
   inserted(dom, options) {
      // options 是指令中的变量的解释，其中有一个属性 叫value
      // dom 表示当前指令作用的对象
      // dom 此时就是图片
      // 初始化时有值则赋值，没值就需要给默认值赋值
      dom.src = dom.src || options.value
      // 当图片有地址 但是地址没有加载成功的时候，会报错，会触发图片的一个事件
      // onerror
      dom.onerror = function() {
         // dom 可以注册 error 事件
         // 这里不能写死
         // 当图片出现异常时候，会将指令配置图片设置为图片内容
         dom.src = options.value
      }
   },
   // 该函数跟 inserted 一样也是一个钩子函数
   // 组件一旦赋值，一旦更新执行
   componentUpdated(dom, options) {
      // 该钩子函数会在当前指令作用的组件，更新数据完毕之后执行
      // 比如说在 created 函数中给图片地址赋值一个 空，不会执行 inserted
      // 因为 inserted 只会执行一次，
      // 而组件初始化一旦更新了它就不会再此进入 inserted 函数，会进入 componentUpdated
      // 例：   created () {
      //    img.src = null
      // }
      dom.src = dom.src || options.value
   }
}

// <img v-imagerror="img" />
// data() { return { img: 'a.png' } }
